<template>
    <el-row class="main">
        <el-col :span="24" class="content box">
            <el-col class="left">
                <el-image
                    src="https://yhykt.oss-cn-beijing.aliyuncs.com/49AF77F4A144449F96B37B32E681EA87e66d4c5fc3fb668edebe13fe6edb821.png?Expires=4785540919&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=oEnOxSfmOx3ZSoZFKMRkiddM7To%3D">
                </el-image>
                <div class="cont tl">
                    <h3 class="mb20">欢迎登录</h3>
                    <h3>五育通·劳动教育云</h3>
                    <span style="margin-top: 50px;display: block;">五育通·劳动教育云学习与实践管理平台</span>
                </div>
            </el-col>
            <el-col class="right">
                <el-col class="loginform box box-tb box-pack-center">
                    <el-col class="title box box-align-center box-pack-end">
                        <el-image src="/static/image/wy_logo.png"
                            style="width: 40px;height: 40px; margin-right: 10px;border-radius: 50%;"></el-image>
                        五育通·劳动教育云
                    </el-col>
                    <el-col>
                        <div class="tab mb20">
                            账号登录
                        </div>
                    </el-col>
                    <el-form ref="loginform" :model="form" label-width="80px" class="reset" :rules="rules"
                        :label-position="labelPosition">
                        <el-form-item label="用户名" prop="usercode">
                            <el-input v-model="form.usercode" @keyup.enter.native="doselect"
                                style="border: #dbecea solid 1px;"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="pwd">
                            <el-input type="password" v-model="form.pwd" @keyup.enter.native="doselect"
                                style="border: #dbecea solid 1px;"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button class="reset-btn" :loading="loading" @click="doselect">登 录</el-button>
                </el-col>
            </el-col>
        </el-col>
        <el-col style="color: #fff;" class="footer box box-tb box-align-center box-pack-center">
            <!-- <el-link class="text-link" :underline="false" href="http://beian.miit.gov.cn" target="_blank"
                style="color: #fff;">北京永恒信业教育科技有限公司 .版权所有 京公网安备 11010802041019号</el-link> -->
            <a class="text-link" target="_blank"
                href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802041019"
                style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                <img src="/static/image/b.png" style="float:left;" alt="">
                <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;"> 京公网安备 11010802041019号</p>
            </a>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                labelPosition: 'left',
                loading: false,
                form: {
                    usercode: '',
                    pwd: ''
                },
                rules: {
                    usercode: [{
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur'
                    }],
                    pwd: [{
                        required: true,
                    		  message: '请输入密码',
                        trigger: 'blur'
                    }]
                }
            };
        },
        methods: {
            doselect() {
                this.$api.login.login({
                    usercode: this.form.usercode,
                    pwd: this.form.pwd
                }).then(res => {
                    if (res.result == "success") {
                        this.$router.push({
                            path: '/role',
                            query: {
                                usercode: this.form.usercode
                            }
                        });
                    } else if (res.result == "none") {
                        this.$message.error('无此用户');
                    } else if (res.result == "password_error") {
                        this.$message.error('密码错误');
                    } else if (res.result == "fwdq") {
                        this.$message.error('服务已到期');
                    } else {
                        this.$message.error('无登录权限');
                    }
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .footer {
        position: absolute;
        bottom: 20px;
        color: #fff;
    }

    .cont {
        // margin: 21% 0 0 12%;
        position: absolute;
        top: 28%;
        left: 12%;
    }

    h3 {
        font-size: 25px;
    }

    .main {
        min-width: 1200px;
        width: 100%;
        height: 100%;
        position: relative;
        background: url(https://yhykt.oss-cn-beijing.aliyuncs.com/0A46AC7C9EB04E29A06FFC7B418DD03Clogin_bg.png?Expires=4785474142&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=oNUEoksoS%2FhHMawYRvyE47%2BEFcc%3D) no-repeat;
        background-size: 100% 100%;

        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            // width: 1200px;
            // height: 550px;
            width: 80%;
            // height: 75%;
            background-color: #fff;

            .left {
                position: relative;
                height: 100%;
                // background: url(https://yhykt.oss-cn-beijing.aliyuncs.com/49AF77F4A144449F96B37B32E681EA87e66d4c5fc3fb668edebe13fe6edb821.png?Expires=4785540919&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=oEnOxSfmOx3ZSoZFKMRkiddM7To%3D) no-repeat;
                // background-size: 100% 100%;
            }

            .right {
                // height: 100%;
            }
        }
    }

    .loginform {
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 120px 25%;
        // width: 633px;
        background: #F8F9FC;
        border-radius: 5px;
    }

    .title {
        padding: 10px 20px;
        // width: 200px;
        position: absolute;
        top: 0;
        right: 0;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 600;
        color: #181623;
        margin-bottom: 20px;
    }

    .tab {
        width: 80px;
        height: 19px;
        line-height: 19px;
        font-size: 20px;
        color: #181623;
        margin-bottom: 60px;

        &:after {
            content: '';
            width: auto;
            width: 46px;
            height: 3px;
     		     background: #FCCC00;
            border-radius: 2px;
            display: block;
            margin: 0 auto;
            margin-top: 10px;
            z-index: 111111;
        }

    }

    .reset>>>.el-input__inner {
        border: none;
        background-color: #F8F9FC;
    }

    .reset>>>.el-form-item {
      	 padding-bottom: 10px;
        border-bottom: 1px solid #D6DBE8;
    }

    .reset-btn {
      	 width: 100%;
        height: 42px;
        background: #626BF1;
        border-radius: 21px;
        font-size: 18px;
        color: #fff;

        &.el-button:focus {
            color: #fff;
            background-color: rgba(98, 107, 241, .7);
        }

        &.el-button:hover {
            color: #fff;
            background-color: rgba(98, 107, 241, .7);
        }

     	  &.el-button:active {
            color: #fff;
            background-color: rgba(98, 107, 241, .7);
        }
    }
</style>
